<template>
  <div class="basicTable">
    <slot name="tableHeader"></slot>
    <el-table
      v-bind="{ ...tableProps }"
      style="width: 100%"
      v-loading="loading"
      element-loading-text="拼命加载中..."
      :data="tableData"
    >
      <template v-for="(column, index) in getColumns" :key="index">
        <TableColumn :columnProps="column" :index="index">
          <template #[item]="data" v-for="item in Object.keys($slots)">
            <slot :name="item" v-bind="data"></slot>
          </template>
        </TableColumn>
      </template>
    </el-table>
    <TablePagination
      v-show="showPagination"
      v-bind="{ ...paginationProps }"
      :total="total"
      @getListByPagination="fetchList"
    ></TablePagination>
    <slot name="tableFooter"></slot>
  </div>
</template>
<script lang="ts">
import { Recordable } from '@/global'
import { computed, defineComponent, onMounted, reactive, toRefs, watch, unref } from 'vue'
import TableColumn from './components/TableColumn.vue'
import TablePagination from './components/TablePagination.vue'
import { ElNotification } from 'element-plus'
import { basicProps } from './props'
import { ParamsProps } from './types/tablePagination'
import { isFunction } from '@/utils/is'
import { ColumnProps } from './types/tableColumn'
export default defineComponent({
  components: { TableColumn, TablePagination },
  props: basicProps,
  emits: ['init-list'],
  setup(props, { emit }) {
    const state = reactive<Recordable>({
      tableTotal: 0,
      tableData: [],
      loading: false
    })
    watch(
      () => props.data,
      () => {
        state.tableData = props.data
      },
      {
        deep: true
      }
    )
    watch(
      () => props.APIProps,
      () => {
        fetchList()
      },
      {
        deep: true
      }
    )
    const getColumns = computed(() => {
      const columns: ColumnProps[] = unref(props).columns
      for (const column of columns) {
        if (!column.align) {
          column.align = 'center'
        }
      }
      return columns
    })
    onMounted(() => {
      fetchList()
    })
    function fetchList(listQuery?: ParamsProps): void {
      if (props.APIProps) {
        if (!isFunction(props.APIProps.request)) return
        const params: ParamsProps = Object.assign(
          {
            currentPage: 1,
            pageSize: 10
          },
          listQuery,
          props.APIProps.params
        )
        state.loading = true
        props.APIProps.request('/inst/student/coin', params)
          .then((res: any) => {
            const { data, code, message } = res
            if (code === 200) {
              state.tableData = data.records
              state.tableTotal = data.total
            } else {
              ElNotification({
                title: '错误',
                message: message
              })
            }
            state.loading = false
          })
          .catch(() => {
            state.loading = false
          })
      } else {
        const params: ParamsProps = Object.assign(
          {
            currentPage: 1,
            pageSize: 10
          },
          listQuery
        )
        emit('init-list', params)
      }
    }
    return { ...toRefs(state), fetchList, getColumns }
  }
})
</script>
